<template>
  <div class="el-quarter-picker-wrap">
    <el-popover placement="bottom-start" title="" trigger="manual" content="" width="235"
                v-model="showCard">
      <el-input slot="reference" v-model="showText" placeholder="选择周期" :size="size" clearable prefix-icon="el-icon-date" readonly
                @click.stop.native="showCard = true"
      ></el-input>
      <div>
        <!-- 年份切换 -->
        <div style="display: flex;align-items: center;justify-content: space-between;">
          <div>
            <el-button icon="el-icon-arrow-left"  type="text" style="color:#303133;" @click="onChange('prev')"></el-button>
          </div>
          <div style="font-size: 16px;">{{showYear}}</div>
          <div>
            <el-button icon="el-icon-arrow-right"  type="text" style="color:#303133;" @click="onChange('next')"></el-button>
          </div>
        </div>

        <!-- 季度列表 -->
        <div style="display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;">
          <div style="width:50%;text-align: center;margin-bottom: 5px;">
            <el-link :type="isActive(showYear,1)? 'primary':''" :underline="false" @click="selectEvent(1)">上半年</el-link>
          </div>
          <div style="width:50%;text-align: center;margin-bottom: 5px;">
            <el-link :type="isActive(showYear,2)? 'primary':''" :underline="false" @click="selectEvent(2)">下半年</el-link>
          </div>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
//季度选择器：
module.exports = {
  data() {
    return {
      showCard: false,

      showTime: new Date(), //展示的时间 完整
      showYear: "", //当前时间 年

      selectTime: "",//选中的当前时间
    }
  },
  props: {
    size: {
      type: String,
      default: "medium"
    },
    value:{
      type: [String,Number],
      default: "" ,//2022-08-23
    }
  },
  model:{
    prop:"value",//定义v-model的值传递给那个prop属性
    event:"change",//定义此事件触发时，自动更新父组件v-model对应的数据
  },
  watch:{
    value:{
      immediate:true,
      handler:function(val){
        if(!val){
          this.selectTime =  "" //当前时间
        }else{
          //解析传入的时间
          this.selectTime = new Date(val)
          //定位到当前年份
          this.showTime = new Date(val)
          this.showYear = this.showTime.getFullYear()
        }
      }
    }
  },
  created(){
    this.showYear = this.showTime.getFullYear()
  },
  mounted(){
    //监听全局按钮的点击
    var that = this
    document.body.addEventListener('click',function(){
      that.showCard = false
    })
  },
  methods:{
    //点击前后切换年份
    onChange(type = ''){
      if(type == 'next'){
        //时间往前后一年
        this.showTime.setFullYear(this.showTime.getFullYear()+1)
      }else if(type == 'prev'){
        // 时间限制点击事件
        if (this.showTime.getFullYear() == '2018') {
          return;
        }
        //时间往前推一年
        this.showTime.setFullYear(this.showTime.getFullYear()-1)
      }

      //更新展示的时间
      this.showYear = this.showTime.getFullYear()
    },
    //选中事件
    selectEvent(halfyear_num = 1){
      //创建一个时间
      var time = new Date()
      //设定年份
      time.setFullYear(this.showYear)
      //设定月份
      if(halfyear_num == 1){
        //上半年设为1月
        time.setMonth(0)
      }else{
        //下半年设为7月
        time.setMonth(6)
      }
      //设定日期和时分秒
      time.setDate(1)
      time.setHours(0)
      time.setMinutes(0)
      time.setSeconds(0)

      //隐藏
      this.showCard = false

      //更新当前时间
      this.selectTime = time

      var date_text = this.transformDateMethod(this.selectTime,format='YY-MM-DD')

      //通知父组件 返回时间戳
      this.$emit('change',date_text,this.getPickText())
    },
    //判断选中的时间和展示的时间是否匹配
    isActive(showYear,halfyear_num){
      // 如果没有选中时间  直接return false
      if(!this.selectTime){
        return false
      }

      //当前年份
      var select_year = this.selectTime.getFullYear()

      //判断当前季度
      var select_halfyear_num = ""
      var select_month = this.selectTime.getMonth() + 1
      if(select_month >= 1 && select_month <= 6){
        select_halfyear_num = 1
      }else{
        select_halfyear_num = 2
      }

      //如果年份 季度一致 则直接返回true
      if(select_year == showYear && select_halfyear_num == halfyear_num){
        return true
      }else{
        return false
      }
    },
    transformDateMethod(dateobj,format=''){
      var year = dateobj.getFullYear()
      var month = dateobj.getMonth()+1
      var date = dateobj.getDate()
      var hours = dateobj.getHours()
      var minutes = dateobj.getMinutes()
      var seconds = dateobj.getSeconds()
      var day = dateobj.getDay()
      var day_str = ''
      switch(day){
        case 0: day_str = '星期日';break;
        case 1: day_str = '星期一';break;
        case 2: day_str = '星期二';break;
        case 3: day_str = '星期三';break;
        case 4: day_str = '星期四';break;
        case 5: day_str = '星期五';break;
        case 6: day_str = '星期六';break;
        default: break;
      }
      if(month < 10){
        month = '0'+ month
      }
      if(date < 10){
        date = '0'+ date
      }
      if(hours < 10){
        hours = '0'+ hours
      }
      if(minutes < 10){
        minutes = '0'+ minutes
      }
      if(seconds < 10){
        seconds = '0'+ seconds
      }
      if(format == ''){
        return `${year}年${month}月${date}日 ${hours}:${minutes}:${seconds} ${day_str}`
      }else{
        //替换年月日时分秒
        format = format.replace('YY',year)
        format = format.replace('MM',month)
        format = format.replace('DD',date)
        format = format.replace('hh',hours)
        format = format.replace('mm',minutes)
        format = format.replace('ss',seconds)
        format = format.replace('Day',day_str)
        return format
      }
    },
    getPickText(){
      if(!this.selectTime){
        return ""
      }

      var halfyear_text = ""
      var month = this.selectTime.getMonth()+1
      if(month >= 1 && month <= 6){
        halfyear_text = "上半年"
      }else{
        halfyear_text = "下半年"
      }

      return `${this.selectTime.getFullYear()}年 ${halfyear_text}`
    }
  },
  computed:{
    //展示选中的时间
    showText(){
      if(!this.selectTime){
        return ""
      }

      var halfyear_text = ""
      var month = this.selectTime.getMonth()+1
      if(month >= 1 && month <= 6){
        halfyear_text = "上半年"
      }else{
        halfyear_text = "下半年"
      }

      return `${this.selectTime.getFullYear()}年 ${halfyear_text}`
    }
  }
}
</script>

<style scoped>

</style>
